<template>
  <div class="hello">
	<div id="log1">
		<!-- <img src="../assets/shiliu.png" > -->
	<input type="text"  id="sc"  :placeholder="plc" v-model="key_word" @keyup.enter="searc()"/>
	<el-button type="primary" icon="el-icon-search" @click.native="searc">搜索</el-button>
    
   </div>
    
   
  </div>
</template>

<script>
	// import {nanoid} from 'nanoid'
	export default {
	name: 'HelloWorld',
	data(){
		return{
			pl:['梨子','苹果','荔枝'],
			i:0,
			key_word:''
		}
	},
	methods:{
		add(){
			this.i++
			if(this.i>=3)
			this.i%=3
		},
		searc(){
			window.location.href='https://search.jd.com/Search?keyword='+this.key_word+'&enc=utf-8&suggest=1.his.0.0&wq=&pvid=fb4b9b6e95f14143a1607f093760cf8f';
		}
	},
	computed:{
		plc:{
			get(){
				return this.pl[this.i]
			},
			set(){
				console.log('a')
			}
		}
	},
	mounted() {
		setInterval(this.add, 2000)
	}
	
	
	// updated(){
	// 	setInterval(function(){x()},1000)
	// 	function x(){
	// 		this.i++;
	// 	}
	// 	console.log(this)
	// }
	}
	
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#log1{
	
/* 	width: 480px; */
/* 	height:200px; */
	margin-top:150px;
/* 	margin-left:700px; */
}
#sc{
	width: 480px;
	height: 45px;
	border: gray 1px solid;
	padding-left: 20px;
	font-size: 20px;
	border-radius: 5px;
	margin:auto;
}
/* img{
	width: 150px;
} */
.hello{
	height: 100px;
	width: 100%;

}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
